<template>
    <div class="saw">
      <div class="title">
        <div class="back-wrapper"><back></back></div>
        我的已看
      </div>
      <div class="content" ref="content">
        <div class="line-block-items">
          <div class="item" v-for="item in sawList">
            <div class="img-wrapper">
              <img :src="item.path" alt="" width="100%" height="100%">
            </div>
            <div class="text-wrapper">
              <h1 class="name">{{item.name}}</h1>
              <p class="introduction">{{item.introduction}}</p>
              <p class="protagonist">{{item.protagonist}}</p>
            </div>
            <div class="score-wrapper" :class="{evaluation:item.isSeen}">
              <button class="score" v-if="!item.isSeen">评分</button>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import back from '../../../components/back/back'
  import BScroll from 'better-scroll'
    export default {
        name: "saw",
        components:{
          'back':back
        },
        data(){
          return{
            evaluation:true,
            sawList:[
              {
                path:'http://image11.m1905.cn/mdb/uploadfile/2018/1025/20181025040226797073.jpg',
                name:'起个什么名字好呢？',
                introduction:'test test test test test',
                protagonist:'雷电法王杨永信 风调雨顺萧敬腾 一米二五郭敬明 普通家庭马化腾 卢本伟没有开G开飞机',
                isSeen:true
              },
              {
                path:'http://image11.m1905.cn/mdb/uploadfile/2018/1025/20181025040226797073.jpg',
                name:'起个什么名字好呢？',
                introduction:'test test test test test',
                protagonist:'雷电法王杨永信 风调雨顺萧敬腾 一米二五郭敬明 普通家庭马化腾 卢本伟没有开G开飞机',
                isSeen:false
              },
              {
                path:'http://image11.m1905.cn/mdb/uploadfile/2018/1025/20181025040226797073.jpg',
                name:'起个什么名字好呢？',
                introduction:'test test test test test',
                protagonist:'雷电法王杨永信 风调雨顺萧敬腾 一米二五郭敬明 普通家庭马化腾 卢本伟没有开G开飞机',
                isSeen:false
              },
              {
                path:'http://image11.m1905.cn/mdb/uploadfile/2018/1025/20181025040226797073.jpg',
                name:'起个什么名字好呢？',
                introduction:'test test test test test',
                protagonist:'雷电法王杨永信 风调雨顺萧敬腾 一米二五郭敬明 普通家庭马化腾 卢本伟没有开G开飞机',
                isSeen:true
              },
              {
                path:'http://image11.m1905.cn/mdb/uploadfile/2018/1025/20181025040226797073.jpg',
                name:'起个什么名字好呢？',
                introduction:'test test test test test',
                protagonist:'雷电法王杨永信 风调雨顺萧敬腾 一米二五郭敬明 普通家庭马化腾 卢本伟没有开G开飞机',
                isSeen:false
              },
              {
                path:'http://image11.m1905.cn/mdb/uploadfile/2018/1025/20181025040226797073.jpg',
                name:'起个什么名字好呢？',
                introduction:'test test test test test',
                protagonist:'雷电法王杨永信 风调雨顺萧敬腾 一米二五郭敬明 普通家庭马化腾 卢本伟没有开G开飞机',
                isSeen:true
              },
              {
                path:'http://image11.m1905.cn/mdb/uploadfile/2018/1025/20181025040226797073.jpg',
                name:'起个什么名字好呢？',
                introduction:'test test test test test',
                protagonist:'雷电法王杨永信 风调雨顺萧敬腾 一米二五郭敬明 普通家庭马化腾 卢本伟没有开G开飞机',
                isSeen:false
              }
            ]
          }
        },
        mounted() {
          this.$nextTick(()=>{
            if(!this.scroll){
              // return
              let scroll = new BScroll(this.$refs['content'],{click:true})
            }else {
              this.scroll.refresh();
            }
          })
        }
    }
</script>

<style scoped lang="stylus">
  .saw
    position absolute
    height 100%
    width 100%
    background #101011
    user-select none
    overflow hidden
    .title
      position relative
      padding 10px 0
      height 22px
      line-height 22px
      text-align center
      font-size 16px
      color #ffffff
      .back-wrapper
        position absolute
        left 0
        top 10px
        width 36px
        height 22px
    .content
      height calc(100% - 72px)
      padding 20px 0
      overflow hidden
      .line-block-items
        padding-bottom 20px
        .item
          display flex
          height 102px
          background #171718
          margin-bottom 10px
          padding 9px 14px
          .img-wrapper
            flex 0 0 70px
          .text-wrapper
            flex 1
            text-align left
            overflow hidden
            padding 15px 0 0 15px
            .name,.introduction,.protagonist
              overflow hidden
              text-overflow ellipsis
              white-space nowrap
            .name
              height 22px
              line-height 22px
              color #ffffff
              font-size 16px
            .introduction
              height 17px
              line-height 17px
              padding-top 8px
              color #ffffff
              font-size 12px
            .protagonist
              height 16px
              line-height 16px
              font-size 11px
              color #8B929E
              padding-top 8px
          .score-wrapper
            flex 0 0 75px
            position relative
            .score
              position absolute
              top 42px
              right 0px
              width 53px
              height 28px
              border-radius 14px
              border none
              background #EEAC21
              color #161719
              font-size 14px
              outline none
            &.evaluation
              background url("bg_evaluation.svg")no-repeat 25px 45px/50px 63px

</style>
